<template>
	<!-- 注册 -->
	<view class="register_box bg-white" style="height: 100vh;">
		<view class="psd_login font" @click="goPages('./psd_login')">密码登录</view>
		<view class="reg_cont">
			<view class="font-weight-bold reg_big_text my-2">手机号登录/注册</view>
			<view class="font my-2">未注册手机验证后即完成注册</view>
			<view class="reg_from">
				<u-form labelPosition="left" :model="loginFrom" ref="loginFrom" :rules="rules">
					<u-form-item prop="username" borderBottom>
						<u-input v-model="loginFrom.username" maxlength="11" border="none" placeholder="请输入您的手机号"></u-input>
					</u-form-item>
					<u-form-item prop="code" borderBottom>
						<u-input v-model="loginFrom.code" border="none" maxlength="6" placeholder="请填写验证码">
							<template slot="suffix">
								<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
								<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
							</template>
						</u-input>
					</u-form-item>
				</u-form>
			</view>
			<button class="c_6 my-3 font font-weight-bold font get_code" @click="pwdLogin">登录</button>
		</view>
		<view class="font flex agreement">
			<checkbox-group @change="agreement = !agreement"><checkbox value="协议" :checked="agreement" /></checkbox-group>
			<view class="font_24_2">
				<text class="c_9">阅读并接受</text>
				<text class="c_main">《索比用户协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
import { register } from '@/api/login/login.js';
export default {
	data() {
		return {
			loginFrom: {
				logType: 1, //1：验证码登录，2：账号密码登 ，3：微信登录
				username: '', //手机号
				code: '' //验证码
			},
			rules: {
				username: [
					{
						type: 'string',
						required: true,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					},
					{
						type: 'string',
						required: true,
						pattern: /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/,
						// transform(value) {
						// 	return String(value);
						// },
						message: '请填写正确的手机号',
						trigger: ['blur', 'change']
					}
				],
				code: [
					{
						type: 'string',
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
					{
						type: 'string',
						required: true,
						min: 4,
						max: 6,
						message: '请填写正确的验证码',
						trigger: ['blur']
					}
				]
			},
			codeShow: false,
			tips: '',
			seconds: 60,
			agreement: false
		};
	},
	// onBackPress(event) {
	// 	this.back();
	// 	return true;
	// },
	// onHide() {
	// 	this.back();
	// },
	// onUnload() {
	// 	this.back();
	// },
	methods: {
		// back() {
		// 	uni.navigateTo({
		// 		url: './wx_login'
		// 	});
		// },
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (!this.loginFrom.username) {
				uni.showToast({
					title: '请先输入您手机号',
					icon: 'none'
				});
			} else {
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					});
					register({ phone: this.loginFrom.username }).then(res => {
						// console.log('验证码', res);
						if (res.code == 0) {
							uni.hideLoading();
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 2000
							});
						}
					});
				} else {
					uni.$u.toast('稍等哦！');
				}
			}
		},
		end() {
			uni.$u.toast('倒计时结束');
		},
		start() {
			uni.$u.toast('正在获取验证码...');
			this.codeShow = true;
		},

		// 登录
		pwdLogin() {
			this.$refs.loginFrom
				.validate()
				.then(res => {
					if (this.agreement) {
						this.toLogin();
					} else {
						uni.showModal({
							title: '用户协议',
							content: '是否同意并接受用户协议？',
							success: res => {
								if (res.confirm) {
									this.agreement = true;
									this.toLogin();
								} else {
									uni.$u.toast('阅读并接受用户协议才可登录哦！');
									this.agreement = false;
									return;
								}
							}
						});
					}
				})
				.catch(errors => {
					uni.$u.toast('请填写正确的账号和验证码');
				});
		},
		toLogin() {
			this.$store.dispatch('login/Login', this.loginFrom).then(() => {
				// 名片详情跳转过来的，登录成功后返回名片详情
				if (uni.getStorageSync('loginToPage').title == 'cardMain') {
					let msg = uni.getStorageSync('loginToPage');
					uni.navigateTo({
						url: '/subPages/my/list/card/card_main?id=' + msg.cardUid + '&exhibitionId=' + msg.exhibitionId
					});
					return;
				}
				uni.reLaunch({
					url: '/pages/my/index'
				});
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.register_box {
	padding: 59rpx 70rpx 0;
	.psd_login {
		text-align: right;
	}
	.reg_cont {
		margin-top: 174rpx;
		.reg_big_text {
			font-size: 52rpx;
		}
		.reg_from {
			margin-top: 110rpx;
		}
		.get_code {
			background-color: $color14; //#f2f2f2;
			color: $color2;//$color7;
			border-radius: 50rpx;
			margin-top: 119rpx;
		}
	}
	.agreement {
		margin-top: 40rpx;
	}
}
::v-deep uni-checkbox .uni-checkbox-input {
	width: 32rpx;
	height: 32rpx;
}
::v-deep .u-form-item__body__right__message {
	margin-left: 0 !important;
}
</style>
